import React from "react";
import PropTypes from "prop-types";
import "./index.css";

class Test extends React.Component {
    constructor() {
        super();
        this.state = {
            title: "react 表单模拟",
            text: '姓名：',
        };
    }

    handleChange(e){
        console.log(e)
    }

    render() {
        const { title, text } = this.state;
        // debugger
        return (
            <div className="test">
                <span>{ title }</span>
                <div className="group">
                    <label>{text}</label>
                    <input
                        className="control"
                        onChange={this.handleChange}
                        required
                    />
                </div>
                <div className={"second"}>
                    <div className={"lf"}>
                        <div className={"title"}>标题图</div>
                        <div className={"content"}>
                            是的哈萨克电话刷卡记录的健康数据库思考垃圾就
                        </div>
                    </div>
                    <div className={"rt"}>
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550856908226&di=ebc2dbea5bd75ad7db911e4910fb3cd7&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Ff2%2F57%2Fd%2F93.jpg" alt=""/>
                    </div>
                </div>
            </div>
        );
    }
}

Text.propTypes = {
    title: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    handleChange: PropTypes.func.isRequired
};

export default Test;